---
type: tutorial
title: 应用全局样式
description: |-
  教程：搭建你的 Astro 博客 -
  创建一个全局样式表，用于整个网站的样式
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

现在你已经给关于页面添加了样式，是时候为网站的其余页面添加一些全局样式吧！

<PreCheck>
  - 应用全局样式
</PreCheck>

## 添加全局样式

你已经看到 Astro 的 `<style>` 标签**默认是有作用域**的，意味着它只能影响到当前文件中的元素。

有几种方法可以在 Astro 中定义全局样式，但在本教程中，你将创建并引入`global.css`文件到你的所有页面。样式文件和`<style>`标签的组合使你可以控制全局的样式，并可以将某些特定样式准确地应用到你想要的位置。

<Steps>
1. 在`src/styles/global.css`创建一个新文件（你需要先创建一个`styles`文件夹）。

2. 把下面代码复制到你新创建的文件`global.css`中：

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. 将下面的`import`语句添加到`about.astro`文件的 frontmatter 中：

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "关于我";

    const identity = {
      firstName: "莎拉",
      country: "加拿大",
      occupation: "技术撰稿人",
      hobbies: ["摄影", "观鸟", "棒球"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "navy";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. 检查你的浏览器中的关于页面，现在你应该可以看到新样式已经被应用了！
</Steps>

<Box icon="puzzle-piece">

## 动手试一试 - 引入全局 CSS 文件

把引入代码行添加到项目中的每个`.astro`文件中，以便将全局样式应用到网站的每个页面。

<details>
<summary>✅ 给我看下代码！✅</summary>

将以下引入代码添加到另外两个页面文件中：`src/pages/index.astro`和`src/pages/blog.astro`。

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

使用静态或动态的 HTML 元素给你的关于页面添加或改变任何你想要的内容。在页面中的 frontmatter 里写一些 JavaScript 代码来给你的 HTML 提供可以使用的值。当你对此页面感到满意时，请在继续下一课之前将你的更改提交到 GitHub。

<Box icon="question-mark">
### 代码分析

你的关于页面现在引入了 `global.css`文件，同时使用了`<style>` 标签。

- 两种设置样式的方法是否都在页面中被应用了？

    <p>
      <Spoiler>是的</Spoiler>
    </p>

- 是否有任何样式冲突，如果有哪一个会被应用？

    <p>
      <Spoiler>有冲突，虽然全局的`<h1>`字体大小现在是`2.5rem`，但在页面`<style>`标签中声明的`4rem`被优先应用到了当前页面上。</Spoiler>
    </p>

- 描述`global.css`和`<style>`如何协同工作。

    <p>
      <Spoiler>当在全局和页面的本地`<style>`标签中定义的样式冲突时，本地样式会覆盖全局样式。（但是，可能还涉及其他影响因素，因此经常性检查你的网站以确保应用了正确的样式！）</Spoiler>
    </p>

- 你会如何选择在页面中引入`global.css`文件还是使用`<style>`标签？

    <p>
      <Spoiler>如果你希望可以在整个网站范围内应用样式，你可以选择使用文件`global.css`。但是，如果你希望样式仅应用于单个`.astro`文件中的 HTML 内容，而会不影响站点上的其他元素，你可以选择`<style>`标签。</Spoiler>
    </p>

</Box>

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以通过引入`.css`文件来应用全局样式。
</Checklist>
</Box>

### 相关资源

- [Astro 和 JSX 间的差异比较](/zh-cn/basics/astro-syntax/#astro-和-jsx-间的差异)
- [Astro `<style>` 标签](/zh-cn/guides/styling/#在-astro-进行设计)
- [Astro 里的 CSS 变量](/zh-cn/guides/styling/#css-变量)
